{#客户交易记录界面,在管理员账户展示单独每个人的#}
{% extends 'laout.html' %}
{% load color %}
{% block content %}
     <div style="margin-bottom: 5px" class="clearfix">
        <button class="btn btn-success" id="btnAdd">
            <span class="glyphicon glyphicon-plus-sign"></span> 新建
        </button>
    </div>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>ID</th>
            <th>类型</th>
            <th>金额</th>
            <th>订单号</th>
            <th>时间</th>
            <th>其他</th>
        </tr>
        </thead>
        <tbody>
            {% for row in pager.queryset %}
                <tr row-id="{{ row.id }}">
                    <td>{{ row.id }}</td>
                    {# get_字段名_display    显示数据库 字段：choices映射对应的中文 #}
                    <td>
                        {# 优化：调用color 为扣款 充值加一个颜色样式                       #}
                        <span class="btn btn-xs btn-{{ row.charge_type|color }}">{{ row.get_charge_type_display }}</span>
                    </td>
                    <td>
                        {% if row.charge_type == 5 or row.charge_type == 1 %}
                            +{{ row.amount }}
                        {% elif row.charge_type == 2 or row.charge_type == 3 %}
                            -{{ row.amount }}
                        {% endif %}
                    </td>
                    <td>
                        {# 如果订单号是 空 则使用-代替                  #}
                         {% if row.order_oid %}
                            {{ row.order_oid }}
                         {% else %}
                            -
                        {% endif %}

                    </td>
                    <td>{{ row.create_datetime|date:"Y-m-d H:i:s" }}</td>
                     <td>
                         {# 如果“其他”字段 内容为空 则使用 - 代替#}
                        {% if row.memo %}
                            {{ row.memo }}
                        {% else %}
                            -
                        {% endif %}

                     </td>
                </tr>
            {% endfor %}
        </tbody>





        {# 模态对话框   #}
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">充值界面</h4>
                </div>
                <div class="modal-body">

                    {# 充值弹窗   #}
                    <form class="form-horizontal" id="addForm">
                        {% csrf_token %}
                        {% for field in form %}
                            <div class="form-group" style="position: relative;margin-bottom: 25px">
                                <label class="col-sm-2 control-label">{{ field.label }}</label>
                                <div class="col-sm-10" style="position: relative;margin-bottom: 25px">
                                    {{ field }}
                                    {#异常提示 position: absolute防止界面位置变动   #}
                                    <span class="error-message" style="color: red;position: absolute">{{ field.errors.0 }}</span>
                                </div>
                            </div>
                        {% endfor %}
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="btnAddSubmit">提 交</button>
                </div>
            </div>
        </div>
    </div>
    </table>
    {#    页码#}
    <ul class="pagination">
        {{ pager.html }}
    </ul>

{% endblock %}

{% block js %}
    <script>
        $(function () {
            // 点击展示模态对话框
            $("#btnAdd").click(function () {
                $('#addModal').modal('show');
            });

            // 使用ajax请求实现弹窗数据提交到后端
            $("#btnAddSubmit").click(function () {
                // 清空异常提示内容
                $(".error-message").empty();
                $.ajax({
                    // 反向生成的地址需要传入 用户id pk参数来源于[ customer_charge交易记录实现的传参]
                    url: "{% url 'customer_charge_add' pk=pk %}",
                    type: "POST", // 记得加csrf_token%}
                    data: $("#addForm").serialize(), // 获取表单所有数据包含csrf_token一起发送
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res)
                        if (res.status) {
                            window.location.reload();}
                        else // 错误信息返回并展示在HTML class=error-message
                            $.each(res.detail, function (k, v) {
                                $("#id_" + k).next().text(v[0]);
                            })}
                    })
                })
            })
    </script>
{% endblock %}